<template>
	<view class="emergency-rescue-page">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left">
				<text class="page-title">附近{{taskCount}}单</text>
			</view>
			<view class="header-right">
				<view class="filter-btn" @click="showFilter">
					<text class="btn-text">筛选</text>
					<text class="arrow">▼</text>
				</view>
				<view class="sort-btn" @click="showSort">
					<text class="btn-text">综合排序</text>
					<text class="arrow">▼</text>
				</view>
			</view>
		</view>
		
		<!-- 任务列表 -->
		<view class="task-list">
			<view 
				class="task-card" 
				v-for="(task, index) in taskList" 
				:key="index"
			>
				
				<!-- 车辆信息 -->
				<view class="car-info">
					<view class="car-brand-model">
						<text class="car-brand">{{task.carBrand}}</text>
						<text class="car-model">{{task.carModel}}</text>
					</view>
					<view class="distance-info">
						<text class="distance-label">距您</text>
						<text class="distance-value">{{task.distance}}km</text>
					</view>
				</view>
				
				<!-- 故障信息 -->
				<view class="problem-info">
					<view class="problem-icon">🔧</view>
					<text class="problem-text">{{task.problem}}</text>
				</view>
				
				<!-- 位置信息 -->
				<view class="location-info">
					<view class="location-icon">📍</view>
					<text class="location-text">{{task.location}}</text>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<view class="detail-btn" @click="viewDetail(task)">
						<text class="detail-text">查看详情</text>
					</view>
					<view class="grab-btn" @click="grabOrder(task)">
						<text class="grab-text">抢单</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 筛选弹窗 -->
		<view class="filter-modal" v-if="showFilterModal" @click="hideFilter">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">筛选条件</text>
					<text class="close-btn" @click="hideFilter">×</text>
				</view>
				<view class="filter-options">
					<view class="filter-item">
						<text class="filter-label">距离范围</text>
						<view class="filter-values">
							<text class="filter-value" :class="{active: selectedDistance === 'all'}" @click="selectDistance('all')">全部</text>
							<text class="filter-value" :class="{active: selectedDistance === 'near'}" @click="selectDistance('near')">5km内</text>
							<text class="filter-value" :class="{active: selectedDistance === 'medium'}" @click="selectDistance('medium')">5-10km</text>
							<text class="filter-value" :class="{active: selectedDistance === 'far'}" @click="selectDistance('far')">10km以上</text>
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">车辆品牌</text>
						<view class="filter-values">
							<text class="filter-value" :class="{active: selectedBrand === 'all'}" @click="selectBrand('all')">全部</text>
							<text class="filter-value" :class="{active: selectedBrand === 'toyota'}" @click="selectBrand('toyota')">丰田</text>
							<text class="filter-value" :class="{active: selectedBrand === 'volkswagen'}" @click="selectBrand('volkswagen')">大众</text>
							<text class="filter-value" :class="{active: selectedBrand === 'honda'}" @click="selectBrand('honda')">本田</text>
							<text class="filter-value" :class="{active: selectedBrand === 'mercedes'}" @click="selectBrand('mercedes')">奔驰</text>
							<text class="filter-value" :class="{active: selectedBrand === 'bmw'}" @click="selectBrand('bmw')">宝马</text>
							<text class="filter-value" :class="{active: selectedBrand === 'audi'}" @click="selectBrand('audi')">奥迪</text>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="reset-btn" @click="resetFilter">重置</view>
					<view class="confirm-btn" @click="confirmFilter">确定</view>
				</view>
			</view>
		</view>
		
		<!-- 排序弹窗 -->
		<view class="sort-modal" v-if="showSortModal" @click="hideSort">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">排序方式</text>
					<text class="close-btn" @click="hideSort">×</text>
				</view>
				<view class="sort-options">
					<view class="sort-item" :class="{active: selectedSort === 'comprehensive'}" @click="selectSort('comprehensive')">
						<text class="sort-text">综合排序</text>
						<text class="check-icon" v-if="selectedSort === 'comprehensive'">✓</text>
					</view>
					<view class="sort-item" :class="{active: selectedSort === 'distance'}" @click="selectSort('distance')">
						<text class="sort-text">距离优先</text>
						<text class="check-icon" v-if="selectedSort === 'distance'">✓</text>
					</view>
					<view class="sort-item" :class="{active: selectedSort === 'brand'}" @click="selectSort('brand')">
						<text class="sort-text">品牌优先</text>
						<text class="check-icon" v-if="selectedSort === 'brand'">✓</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskCount: 6,
				showFilterModal: false,
				showSortModal: false,
				selectedDistance: 'all',
				selectedBrand: 'all',
				selectedSort: 'comprehensive',
				taskList: [
					{
						id: 1,
						location: '市中心商业街',
						carBrand: '丰田',
						carModel: '凯美瑞',
						distance: '2.5',
						problem: '发动机故障'
					},
					{
						id: 2,
						location: '环城高速入口',
						carBrand: '大众',
						carModel: '帕萨特',
						distance: '8.3',
						problem: '轮胎爆胎'
					},
					{
						id: 3,
						location: '学校附近',
						carBrand: '本田',
						carModel: '雅阁',
						distance: '12.7',
						problem: '电瓶没电'
					},
					{
						id: 4,
						location: '万达广场停车场',
						carBrand: '奔驰',
						carModel: 'C200',
						distance: '5.2',
						problem: '车门锁死'
					},
					{
						id: 5,
						location: '医院门口',
						carBrand: '宝马',
						carModel: 'X3',
						distance: '9.8',
						problem: '刹车失灵'
					},
					{
						id: 6,
						location: '住宅小区',
						carBrand: '奥迪',
						carModel: 'A4L',
						distance: '4.1',
						problem: '空调故障'
					}
				]
			}
		},
		methods: {
			// 显示筛选弹窗
			showFilter() {
				this.showFilterModal = true;
			},
			// 隐藏筛选弹窗
			hideFilter() {
				this.showFilterModal = false;
			},
			// 显示排序弹窗
			showSort() {
				this.showSortModal = true;
			},
			// 隐藏排序弹窗
			hideSort() {
				this.showSortModal = false;
			},
			// 选择距离筛选
			selectDistance(distance) {
				this.selectedDistance = distance;
			},
			// 选择品牌筛选
			selectBrand(brand) {
				this.selectedBrand = brand;
			},
			// 选择排序方式
			selectSort(sort) {
				this.selectedSort = sort;
				this.hideSort();
			},
			// 重置筛选
			resetFilter() {
				this.selectedDistance = 'all';
				this.selectedBrand = 'all';
			},
			// 确认筛选
			confirmFilter() {
				this.hideFilter();
				uni.showToast({
					title: '筛选已应用',
					icon: 'success'
				});
			},
			// 查看详情
			viewDetail(task) {
				uni.showModal({
					title: '任务详情',
					content: `车辆：${task.carBrand} ${task.carModel}\n故障：${task.problem}\n位置：${task.location}\n距离：${task.distance}km`,
					showCancel: false
				});
			},
			// 抢单
			grabOrder(task) {
				uni.showModal({
					title: '确认抢单',
					content: `确定要抢取这个救援任务吗？\n车辆：${task.carBrand} ${task.carModel}\n故障：${task.problem}\n距离：${task.distance}km`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '抢单成功',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.emergency-rescue-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 页面头部 */
	.page-header {
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
	}
	
	.page-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}
	
	.filter-btn, .sort-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 10rpx 15rpx;
		border-radius: 8rpx;
		background-color: #f8f8f8;
	}
	
	.btn-text {
		font-size: 26rpx;
		color: #666;
	}
	
	.arrow {
		font-size: 20rpx;
		color: #999;
	}
	
	/* 任务列表 */
	.task-list {
		padding: 20rpx;
	}
	
	.task-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	
	/* 车辆信息 */
	.car-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}
	
	.car-brand-model {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	
	.car-brand {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.car-model {
		font-size: 28rpx;
		color: #666;
	}
	
	.distance-info {
		text-align: right;
	}
	
	.distance-label {
		font-size: 24rpx;
		color: #999;
		display: block;
	}
	
	.distance-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #007AFF;
	}
	
	/* 故障信息 */
	.problem-info {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 15rpx;
		background-color: #fff3cd;
		border-radius: 8rpx;
		border-left: 4rpx solid #ffc107;
	}
	
	.problem-icon {
		font-size: 24rpx;
		margin-right: 10rpx;
	}
	
	.problem-text {
		font-size: 26rpx;
		color: #856404;
		font-weight: bold;
	}
	
	/* 位置信息 */
	.location-info {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		padding: 15rpx;
		background-color: #e3f2fd;
		border-radius: 8rpx;
	}
	
	.location-icon {
		font-size: 20rpx;
		margin-right: 10rpx;
	}
	
	.location-text {
		font-size: 26rpx;
		color: #1976d2;
		flex: 1;
	}
	
	/* 操作按钮 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.detail-btn {
		padding: 15rpx 25rpx;
		border: 2rpx solid #007AFF;
		border-radius: 8rpx;
		background-color: white;
	}
	
	.detail-text {
		font-size: 26rpx;
		color: #007AFF;
	}
	
	.grab-btn {
		padding: 15rpx 40rpx;
		background-color: #ff6b35;
		border-radius: 8rpx;
	}
	
	.grab-text {
		font-size: 28rpx;
		font-weight: bold;
		color: white;
	}
	
	/* 弹窗样式 */
	.filter-modal, .sort-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.modal-content {
		background-color: white;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow-y: auto;
	}
	
	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
	
	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.close-btn {
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 筛选选项 */
	.filter-options {
		padding: 30rpx;
	}
	
	.filter-item {
		margin-bottom: 40rpx;
	}
	
	.filter-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.filter-values {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}
	
	.filter-value {
		padding: 15rpx 25rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #666;
		background-color: white;
	}
	
	.filter-value.active {
		border-color: #007AFF;
		color: #007AFF;
		background-color: #f0f8ff;
	}
	
	.modal-footer {
		display: flex;
		padding: 30rpx;
		gap: 20rpx;
		border-top: 1rpx solid #e5e5e5;
	}
	
	.reset-btn, .confirm-btn {
		flex: 1;
		padding: 20rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.reset-btn {
		background-color: #f8f8f8;
		color: #666;
		border: 2rpx solid #e5e5e5;
	}
	
	.confirm-btn {
		background-color: #007AFF;
		color: white;
	}
	
	/* 排序选项 */
	.sort-options {
		padding: 30rpx;
	}
	
	.sort-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.sort-item:last-child {
		border-bottom: none;
	}
	
	.sort-item.active {
		background-color: #f0f8ff;
	}
	
	.sort-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.check-icon {
		font-size: 32rpx;
		color: #007AFF;
		font-weight: bold;
	}
</style>